<template>
  <div>
    <h1 style="text-align: center; font-size: 20px">用户列表</h1>
    <el-table :data="userInfo" height="30vw" style="width: 100%">
      <el-table-column prop="userID" label="用户账号" width="180" />
      <el-table-column prop="userName" label="用户姓名" width="180" />
      <el-table-column prop="password" label="用户密码" width="180" />
      <el-table-column prop="role" label="用户角色" width="180" />
      <el-table-column prop="operation" label="操作" width="240">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            @click="
              dialog = true;
              updateRow(scope.$index, userInfo);
            "
            circle
          />
          <el-button
            type="danger"
            :icon="Delete"
            @click="deleteRow(scope.$index, userInfo)"
            circle
          />
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      v-model="dialog"
      title="用户信息修改"
      :with-header="true"
      direction="ltr"
      class="demo-drawer"
      modal="true"
      width="600px"
    >
      <div style="margin: 1vw 0">
        <el-card style="max-width: 40vw; margin-left: 0.5vw">
          <div
            style="
              text-align: center;
              font-size: 2vw;
              font-weight: bold;
              margin-bottom: 1vw;
            "
          >
            用户信息修改
          </div>
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="当前账户账号:" style="margin-left: -0.7vw">
              <el-input
                v-model="form.userID"
                style="width: 18vw; margin-left: 0.6vw"
                disabled
              />
            </el-form-item>
            <el-form-item label="修改账户姓名:" style="margin-left: -0.7vw">
              <el-input
                v-model="form.userName"
                style="width: 20vw; margin-left: 0.7vw"
              />
            </el-form-item>
            <el-form-item label="修改账户密码：">
              <el-input
                v-model="form.password"
                type="password"
                style="width: 20vw"
              />
            </el-form-item>
            <el-form-item label="修改账户角色:" style="margin-left: -0.7vw">
              <el-input
                v-model="form.role"
                style="width: 20vw; margin-left: 0.7vw"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" style="width: 21vw"
                >修改</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { ElMessage } from "element-plus";
import { Edit, Delete } from "@element-plus/icons-vue";

const userInfo = ref([]);
const axios = inject("axios");
const updateState = ref("");
let dialog = ref(false);
const loading = ref(false);
let isShow = ref(false);
const form = ref({
  userID: "",
  userName: "",
  password: "",
  role: "",
});
const value = ref(form.value.role);

const updateRow = async (index, userInfo) => {
  console.log(userInfo[index].userID);

  form.value.userID = userInfo[index].userID;
  form.value.userName = userInfo[index].userName;
  form.value.password = userInfo[index].password;
  form.value.role = userInfo[index].role;
};

const onSubmit = async () => {
  await axios
    .post("Admin/renewUserInfo", {
      userID: form.value.userID,
      userName: form.value.userName,
      role: form.value.role,
      password: form.value.password,
    })
    .then((response) => {
      updateState.value = response.data;
      console.log(updateState.value);
    })
    .catch((error) => {
      console.log(error);
    });

  if (updateState.value == 1) {
    ElMessage({
      message: "修改信息成功！",
      type: "success",
      plain: true,
    });
    updateState.value = 0;
  } else {
    ElMessage({
      message: "修改信息失败！",
      type: "error",
      plain: true,
    });
  }
  location.reload()
};

const deleteRow = async(index, userInfo) => {
  console.log(userInfo[index].userID);
 await axios
    .post("Admin/delUserInfo", {
      userID: userInfo[index].userID,
    })
    .then((response) => {
      updateState.value = response.data;
      console.log(updateState.value);
    })
    .catch((error) => {
      console.log(error);
    });

  if (updateState.value == 1) {
    ElMessage({
      message: "删除信息成功！",
      type: "success",
      plain: true,
    });
  } else {
    ElMessage({
      message: "删除信息失败！",
      type: "error",
      plain: true,
    });
  }
  location.reload()
};

const init = () => {
  axios
    .post("Admin/listAllUser", {})
    .then((response) => {
      userInfo.value = response.data;
      console.log(userInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
</style>